<!DOCTYPE html>
<html lang="en-US">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <title>流水线管理系统 - 嵌入式竞赛作品 - 小组10410</title>
        <!-- jQuery and Bootstrap -->
        <link rel="stylesheet" href="https://cdn.staticfile.org/bootstrap/4.6.0/css/bootstrap.min.css" crossorigin="anonymous">
        <script src="https://cdn.staticfile.org/jquery/3.6.0/jquery.min.js" crossorigin="anonymous"></script>
        <script src="https://cdn.staticfile.org/bootstrap/4.6.0/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
        <nav class="navbar navbar-expand-md bg-dark navbar-dark">
    <span class="navbar-brand">流水线管理系统</span>
    <!--a class="navbar-brand" href="/"></a-->
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="collapsibleNavbar" style="justify-content:space-between;">
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="/">主页</a>
            </li>
            <% if(user!="" && user!=undefined) {%>
            <li class="nav-item">
                <a class="nav-link" href="/auth">账户</a>
            </li>
            <% } %>
        </ul>
        <ul class="navbar-nav">
        <% if(user=='' || user==undefined){ %>
            <li class="nav-item">
                <a class="btn btn-success" href="#" data-toggle="modal" data-target="#loginForm">登录</a>
            </li>
        <%}else{%>
            <li class="nav-item">
                <a class="nav-link" href="/auth"><%=user%></a>
            </li> 
            <li class="nav-item">
                <a class="btn btn-secondary" href="javascript:logout();">退出</a>
            </li>
        <%}%>
        </ul>
        
    </div>
</nav>
<div class="modal fade" id="loginForm" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="myModalLabel">登录</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label>用户名</label>
                    <input type="text" name="usr" class="form-control" id="usr" placeholder="用户名"/>
                </div>
                <div class="form-group">
                    <label>密码</label>
                    <input type="password" name="pwd" class="form-control" id="pwd" placeholder="密码"/>
                </div>
                <div class="form-group" id="login_fail_tip" class="my_tip" style="display:none">
                    <p class="text-danger">用户名或密码错误</p>
                </div>
                <div class="form-group" id="login_elsewhere_tip" class="my_tip" style="display:none">
                    <p class="text-danger">您的账户已在别处登录！
                    <br>您的信息可能已经泄露，或者您上次忘记退出。</p>
                </div>
            </div>
            <div class="modal-footer">
                <a href="javascript:login()" id="btn_submit" class="btn btn-primary">登录</a>
            </div>
        </div>
    </div>
</div>
<script>
$('body').on('hidden.bs.modal', '.modal', function () {
    $(".modal input").val("");
    $(".my_tip").hide();
});
<% if(user==undefined){%>
function login(){
    $.ajax({async:true,cache:false,type:'POST',url:'/auth/login',data:{"username":$("#usr")[0].value,"password":$("#pwd")[0].value},
            success : function(data) {
                if(data.success){
                    location.reload();
                }else{
                    if(data.err=='bad user or pwd'){
                        $("#login_fail_tip").show();
                    }else{
                        $("#login_elsewhere_tip").show();
                    }                            
                }
            }
    });
}
<%}else{%>
function logout(){
    $.ajax({async:true,cache:false,type:'POST',url:'/auth/logout',
            success : function(data) {
                if(data.success){
                    location.reload();
                }
            }
    });
}
<%}%>
</script>
<div style='display:none;' id='major-alert' class='alert' role='alert'>
    <span id='content'>msg</span>
    <button type="button" class="close">
        <span aria-hidden="true" onclick="HideAlert()">&times;</span>
    </button>
</div>
<script>
function ShowAlert(content,type='info'){//type=primary,secondary,info,danger,success,warning
    $('#major-alert #content').text(content);
    $('#major-alert').attr('class','alert alert-'+type).show();
}
function HideAlert(){
    $('#major-alert').hide();
}
</script>